<template>
  <div class="common-layout">
    <div class="layout">
      <el-container>
        <!-- 左边 -->
        <el-aside width="170px" class="left">
          <!-- 头像区域 -->
          <el-card shadow="never" :body-style="{ padding: '20px' }">
            <div class="userInfo">
              <!-- <img class="avatar" src="./images/avatar.png" alt=""> -->
              <img class="avatar" :src="centerStore.userInfo.avatar" alt="">
              <!-- <a href="https://www.dance365.com/home?userId=ff80808183ede03d0183eec869b543ac&share=share"><span>{{centerStore.userInfo.account}}</span></a> -->
              <a :href="centerStore.webUrl"><span>{{centerStore.userInfo.account}}</span></a>
              <div class="lv">
                Lv.{{centerStore.userInfo.level}}
              </div>
              <el-row :gutter="20" class="infoBottom">
                <el-col :span="12" :offset="0">
                  <span>{{centerStore.followCount}}</span>
                  <span>关注</span>
                </el-col>
                <el-col :span="12" :offset="0">
                  <span>{{centerStore.fansCount}}</span>
                  <span>粉丝</span>
                </el-col>
              </el-row>

            </div>
            <!-- card body -->
          </el-card>
          <!-- 中间 -->
          <div class="layoutLeft">
            <router-link to="/center/resource" class="resource">资源动态</router-link>
          </div>
          <!-- 中间多选处 -->

          <div class="nav-box">
            <router-link to="/center/member">
              <div class="navigation-item ">我的会员</div>
            </router-link>
            <div class="navigation-item">我的钱包</div>
            <div class="navigation-item">我的优惠券</div>
            <div class="navigation-item">我买的订单</div>
            <div class="navigation-item last">
              <!-- 菜单 -->
              <el-menu>
                <el-sub-menu class="ResourceDynamicItem">
                  <template #title>
                    <div class="betray">
                      <span>我卖的</span>
                    </div>
                  </template>
                  <el-menu-item>订单管理</el-menu-item>
                  <el-menu-item>商品管理</el-menu-item>
                  <el-menu-item>客户管理</el-menu-item>
                  <el-menu-item>代收款</el-menu-item>
                  <el-menu-item>优惠管理</el-menu-item>
                  <el-menu-item>评论管理</el-menu-item>
                  <el-menu-item>保证金</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </div>
          </div>
          <!-- 底部 -->
          <div class="layoutLeft">
            <router-link to="/center/Information" class="resource">我的资料</router-link>
          </div>
        </el-aside>
        <!-- 右边 -->
        <el-container class="layoutRight">
          <!-- 右边的头部头部 -->
          <el-header class="right-header">
            <div>
              动态资源
            </div>
          </el-header>
          <!--右边的底部 -->
          <router-view></router-view>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
  

<script setup lang="ts">

// 引入请求
import { ref, onMounted } from 'vue'
import useCenterStore from '../../stores/center'

// 定义仓库
let centerStore = useCenterStore()
onMounted(() => {
  // 发请求
  centerStore.getUserInfo()

})
let access_token = '93b69bf1-9a53-4639-8866-baa988967d23'
// 获取用户信息的请求
const getUserInfo = async () => {
  let result = await reqUserInfo(access_token)
  console.log(result);
  userInfo.value = result
}
</script>

<style >
.common-layout {
  width: 100%;
  background-color: #f5f7f9;
  margin-top: 20px;
}

.layout {
  width: 1200px;
  margin: 0 auto
}

.left {
  /* background-color: aquamarine; */
  margin-right: 10px;
  overflow: hidden;
}


/* 个人信息区域 */
.userInfo {
  width: 100%;
  height: 219px;
  /* padding: 21px 0; */
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

/* level的样式 */
.lv {
  height: 20px;
  width: 41px;
  background-color: #ff43d0;
  margin: 0 auto;
  border-radius: 4px;
  text-align: center;
  margin-top: 5px;
  font-style: oblique;
  font-weight: 600;
  font-size: 12px;
  color: white;
  line-height: 20px;
}



.infoBottom {
  margin: 20px 0;

}

.infoBottom span {
  display: block;
  margin: 0 auto;
  text-align: center;
  margin: 2px 0;
  font-size: 14px;
}

/* 中间部分 */
.layoutLeft {
  margin: 10px 0;
  height: 50px;
  width: 100%;
  background-color: white;
  border-radius: 2px;
}



.layoutLeft:hover {
  border-left: 3px solid #f93684;
}


.layoutLeft .resource {
  line-height: 50px;
  padding: 17px 21px;
  font-size: 14px;
}


/* 资源动态设置路由跳转时的样式 */
.layoutLeft a {
  text-decoration: none;
  color: #111;
}


/* 导航中间部分 */
.nav-box {
  margin-top: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;
  padding: 5px 0;
  margin-bottom: 10px;
}

/* 路由跳转的样式 */
.nav-box a {
  text-decoration: none;
  color: #111;
}

.navigation-item {
  font-size: 14px;
  color: #111;
  padding: 17px 21px;

  cursor: pointer;

  position: relative;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: all .7s;
}

.navigation-item.last {
  padding: 0 21px 0 21px;
  box-sizing: content-box !important;
  /* margin-bottom: 5px; */
}

.navigation-item:hover {
  border-left: 3px solid #f93684;
}

.active-left {
  border-left: 3px solid #f93684;
}



.el-menu {

  border-right: none !important;
  margin-left: -20px !important;
}

.el-menu span {
  margin-left: 2px !important;
}

.el-menu-item {
  margin-left: 35px !important;
}

.el-menu-item.is-active {
  color: black !important;
}

li:hover {
  background-color: white !important;
  color: red;
}

.el-sub-menu__title {
  height: 42px !important;
}

.el-sub-menu__title {
  background-color: white !important;
}

/* 底部 */


.text {
  font-size: 14px;
}

.text a {
  text-decoration: none;
  color: #111;
}

.item {
  padding: 18px 0;
  border-left: 3px solid #fff;
}

.item:hover {
  border-left-color: #f93684;
}

.box-card {
  width: 100%;
}

/* 右边的头部 */
.layoutRight {
  width: 1020px;
}

.right-header {
  width: 1020px;
  height: 72px;
  margin-bottom: 10px;
  background: #fff;
}

.right-header div {
  line-height: 72px;
  padding-left: 30px;
  font-size: 14px;
}
</style>